<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>任务模板</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
    body{background:#FFF;}
    .template_list{
      padding:0 0.35rem;
      margin-top:0.2rem;
    }
    .template_list li{
      background:#FAFAFA;
      border-radius:0.08rem;
      padding:0.35rem 0.4rem;
      margin-bottom:0.35rem;
    }
    .template_list li:nth-last-child(1){
      margin-bottom:0;
    }
    .template_list li .icon{
      width:1.2rem;
      height:1.2rem;
      border-radius:50%;
      float:left;
    }
    .template_list li .info{
      float:left;
      width:calc(100% - 0.18rem - 1.2rem);
      padding-left:0.35rem;
      padding-right:0.3rem;
    }
    .template_list li .info h3{
      font-weight:normal;
      font-size:0.3rem;
      color:#2F2F2F;
      height:0.5rem;
      line-height:0.5rem;
      margin-top:0.05rem;
    }
    .template_list li .info span{
      font-size:0.27rem;
      color:#999999;
      height:0.5rem;
      line-height:0.5rem;
      display:block;
      margin-top:0.15rem;
      font-weight:300;
    }
    .template_list li .right{
      width:0.18rem;
      float:right;
      height:0.35rem;
      margin-top:calc((1.2rem - 0.35rem) / 2);
    }
    .template_list li .more{
      height:0.4rem;
      margin-top:calc((1.2rem - 0.4rem) / 2);
    }
    .m-add{
      display: flex;
      justify-content: center;
    }
    .m-add ._btn{
        color: #989898;
        border: 1px solid #F6F6F6;
        margin: 0 3%;
        padding: .22rem 1.8rem;
        border-radius: 1rem;
        cursor: pointer;
		font-size:0.3rem;
    }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="list!=null">
            <template v-if="list.length>0">
                <ul class="template_list">
                    <li class="clearfix" v-for="item in list" @click="onChoose(item)">
                        <img :src="item.icon" class="icon" />
                        <div class="info">
                            <h3 class="ell">{{item.name}}</h3>
                            <span class="ell">保存时间：{{item.time_created | dateFormate}}</span>
                        </div>
                        <img src="../../../image/icons/right.png" class="right" />
                    </li>
                </ul>
                <div class="loadText">
                    <div class="weui-loadmore" v-if="hasMore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <span v-else class="over">我已经到底啦！</span>
                </div>
            </template>
            <template v-else>
                <div class="loadFull whiteBg">
                    <section class="m-no">
                        <div class="u-img"></div>
                        <div class="u-spec">空空如也，一个模板也没有</div>
                        <div class="m-add">
                            <div class="_btn" @click="$.alert('任务模板适用万能任务，若需添加请在发布万能任务时候保存为模板即可')">添加模板</div>
                        </div>
                    </section>
                </div>
            </template>
        </template>
        <template v-else>
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var iOSDialog = api.require('iOSDialog');
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    templateType: null,
                    tpId: null,
                    list: null,
                    hasMore: true,
                    page: 1,
                },
                created: function(){
                    this.templateType = api.pageParam.data.templateType || null;
                    this.tpId = api.pageParam.data.tpId || null;
                },
                filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'yyyy-MM-dd hh:mm');
                    },
                },
                methods:{
                    editeTpl(id){
                        var _this = this;
                        iOSDialog.actionSheetDialog({title:"请选择您的操作",items:["重命名","删除"]},function(ret, err){
                            if(ret.index==1){
                                $.prompt({
                                    title:"提示",
                                    msg:"请输入新的任务模板名称",
                                    buttons:['取消','确定'],
                                    success:function(res){
                                        var name = res.trim();
                                        _this.onRename(id, name);
                                    }
                                });
                            }else if(ret.index==2){
                                $.confirm({
                                    title: '提示',
                                    msg: '真的要删除吗？',
                                    buttons: ['取消','确定'],
                                    success:function(){
                                        _this.onDelete(id);
                                    }
                                });
                            }
                        });
                    },
                    selecteTpl: function(item){
                        // 通过事件把选择带模板内容发送到创建任务的页面
                        // 创建任务步骤的页面需要注册以下两个事件，用于接收模板内容。
                        if(this.templateType == 1){
                            api.sendEvent({
                                name: 'selectedSimpleTemplate',
                                extra: {
                                    template: item
                                }
                            });
                            return;
                        }
                        if(this.templateType == 0){
                            api.sendEvent({
                                name: 'selectedCustomTemplate',
                                extra: {
                                    template: item
                                }
                            });
                            return;
                        }
                    },
                    onChoose: function(item){
                        if(this.templateType === null){
                            this.editeTpl(item.id);
                        }else{
                            this.selecteTpl(item);
                        }
                    },
                    getMyTemplates: function(){
                        var _this = this;
						if(_this.hasMore){
							var page = this.page;
							var url = ''
							if(this.templateType === null){
							    url = '/task/template/query_my_by_project?page='+page;
							}else{
							    url = '/task/template/query_my_by_project?tp_id='+this.tpId+'&tpl_type='+this.templateType+'&page='+page;
							}
							$.ajax({
							    url: url,
							    method: 'get',
							    success: function(res){
							        var list = res.data.records;
							        var hasMore = list.length >= res.data.limit;
							        if(page == 1){
							            _this.list = list;
							        }else{
							            _this.list = _this.list.concat(list);
							        }
							        _this.page += 1;
							        _this.hasMore = hasMore;
							    },
							    error: function(err){
							        if(_this.page == 1 && err.code == 404){
							            _this.list = [];
							            return false;
							        }
							        $.toast(err.message);
							    }
							});
						}
                    },
                    reload: function(){
                        this.page  = 1;
                        this.hasMore = true;
                        this.getMyTemplates();
                    },
                    onDelete: function(id){
                        var _this = this;
                        $.ajax({
                            url: '/task/template/delete',
                            method: 'post',
                            load: true,
                            data: {tt_id: id},
                            success: function(res){
                                $.toast('删除成功');
                                _this.reload();
                            },
                        });
                    },
                    onRename: function(id, name){
                        var _this = this;
                        $.ajax({
                            url: '/task/template/target',
                            method: 'post',
                            load: true,
                            data: {tt_id: id, name: name},
                            success: function(res){
                                $.toast('修改成功');
                                var list = _this.list;
                                for(var i = 0; i< list.length; i++){
                                    if(list[i].id == id){
                                        _this.$set(_this.list[i], 'name', name);
                                        break;
                                    }
                                }
                            }
                        });
                    },
                },
                mounted(){
					$.initJs(this);
                    this.getMyTemplates();
                }
            });


            //下拉刷新
            $.pullDown({
                success:function(){
                    app.reload();
                }
            });

            //上拉加载
            api.addEventListener({
                name:'scrolltobottom',
                extra:{threshold:10}
            }, function(ret, err){
                app.getMyTemplates();
            });
        }
    </script>
</body>
</html>
